<style scoped lang="less">
</style>
<template>
	<div class="inspect-setting">
		<el-container :style="{height: '480px'}">
		  	<el-aside class="area-blk" width="238px">
		  		<h2 class="hd">巡检点类型</h2>
		  		<typeTree @nodeClick="typeClickAction" :activeId="activeData ? activeData.type : ''"></typeTree>
		  	</el-aside>
		  	<el-main class="census-main">
		  		<el-form ref="setForm" :model="setForm" label-width="150px">
					<el-form-item label="所属企业单位：">{{siteInfos.homeName}}</el-form-item>
					<el-form-item label="巡检点类型：" prop="type" :rules="[{ required: true, message: '请选择巡检点类型'}]">{{activeType}}</el-form-item>
					<el-form-item label="RFID码：" v-if="activeData">{{activeData.rfid}}</el-form-item>
					<el-form-item label="所在分区：" prop="partition" :rules="[{ required: true, message: '请选择所在分区', trigger: 'change' }]">
						<el-select v-model="setForm.partition" placeholder="请选择" clearable @change="partitionChange">
							<el-option :label="item.name" :value="item.id" v-for="(item, index) in partitionList" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="具体位置：" prop="seat" :rules="[{ required: true, message: '请选择具体位置', trigger: 'change' }]">
						<el-select v-model="setForm.seat" placeholder="请选择" clearable>
							<el-option :label="item.name" :value="item.id" v-for="(item, index) in seatList" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="详细巡检地址："  prop="addr" :rules="[{ required: true, message: '请输入详细地址', trigger: 'change' }]">
				    	<el-input placeholder="请输入" v-model.trim="setForm.addr"></el-input>
				  	</el-form-item>
				</el-form>
		  	</el-main>
		</el-container>
	</div>
	<!-- render-content="renderContent" -->
</template>
<script>

import typeTree from '@/components/archive/TypeTree.vue'
import { mapState } from 'vuex'
export default {
	name: 'inspectSetting',
	components: {
		typeTree
	},
	props: {
		partitionList: {
			type:Array,
			default () {
				return []
			}
		},
		activeData: {
			type: Object,
			default () {
				return []
			}
		}
	},
	computed: {
		...mapState([
			'siteInfos'
		]),
	},
	watch: {},
	data () {
		return {
			setForm: {
				type: ''
			},
			activeType: '',
			seatList:[]
		}
	},
	methods: {
		initForm () {
			if(this.activeData){
				this.setForm = this.utils.pick(this.activeData,['id','type','partition','seat','addr','rfid'])
				this.activeType = this.activeData.typeName
				this.getSeat(this.setForm.partition)
			}else{
				this.setForm = {}
			}
		},
		typeClickAction (data,level,names) {
			names.splice(0,1)
			this.activeType = names.join('-')
			this.$set(this.setForm, 'type', data.id)
			this.$refs.setForm.validateField("type");
		},
		partitionChange (val) {
			if(!val){
				this.seatList=[]
			}else{
				this.getSeat(val)
			}
		},
		getSeat (id) {
			this.$get('/check/businessSeat/businessSeatListPage',{partitionId: id}).then(res => {
                this.seatList = res.data.Items
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		submitAction () {
			this.$refs['setForm'].validate((valid) => {
				if (valid) {
					this.$emit('submitting')
					let params = Object.assign({},this.setForm)
					this.$ajax({
						url: this.activeData? '/check/checkaddr/checkaddrUpdate':'/check/checkaddr/checkaddrAdd',
						method: 'post',
						data: params
					}).then( data => {
						this.loading = false
						this.$message({
							type: 'success',
							message: '保存成功',
							center: true
						})
						this.$emit('success',data);
					}, error => {
						this.loading = false
						this.$emit('fail');
						this.$message.error(error.msg);
					})
				} else {
					return false;
				}
			});
		}
	},
	created () {
		this.initForm()
		// this.getType()
	},
}
</script>